<script>
export default{
    props:{
        menu:{
            type:Array,
            default(){ return [] }
        }
    },
    methods:{
        go(v){
            event.preventDefault()
            if(!v.target || v.target=='_self'){
                this.$router.push(v.linkto)
            }else{
                window.open(v.linkto,v.title)
            }
        },
    },
}
</script>
<template>
    <component v-for="v in menu" :is="v.child?.length>0?'a-sub-menu':'a-menu-item'" :key="v.id">
        <template v-if="v.child?.length>0" #title>
            <component :is="v.icon" />
            <span>{{ v.title }}</span>
        </template>
        <template v-if="!v.child?.length>0">
            <component :is="v.icon" />
            <span>{{ v.title }}</span>
            <!-- <router-link :to="v.linkto" target="_bank"></router-link> -->
            <a :href="v.linkto" @click="go(v)"></a>
        </template>

        <slot :child="v.child"></slot>
    </component>
</template>
